<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			#container{
				/*开启弹性布局*/
				    display:flex;
				    /*wrap：换行，第一行在上方。*/
				    flex-wrap:wrap;

			}
			
			.div1{
			position: relative;
				margin: 0 auto;
				
		
			}
			
			.div1 h1{
				text-align: center;
			}
			
			input{
				margin-bottom: 15px;
			}
			input:nth-of-type(3){
				position: absolute;
				right:110px;
				top: 220px;
					
				width: 100px;
				height: 40px;
				background-color: #FA8072;
				border: 1px sandybrown solid;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
			}
			input:nth-of-type(3):hover{
				transform: scale(1.2);
				  transition:all 0.5s ease-in-out ;
				  background-color: antiquewhite;
				  cursor: pointer;
			}
			.addClass1 {

				background-image: url("/images/2.gif");
				/*防止图片没加载出来 使用颜色代替*/

				/*适配图片大小*/
				/* background-size:cover; */
				/*背景图显示方式*/
				background-repeat: no-repeat;
				/*图像定位*/
				background-position: center;
				width: 500px;
				height: 500px;
				display: block;
				background-size:cover;
				border-radius: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);


			}
		</style>
		

	</head>
	<body>
		
		<div id="container" >
			
			
			<div class="div1" >
				<h1>创建相册</h1>
					相册名称:<input type="text"  id="upload_crowd_name"/><br>
					相册封面:<input type="file"   id="crowd_file"/><br>
					相册描述:<textarea  id="upload_crowd_desc"></textarea><br>
					<input type="submit" value="提交"  id="submit"/>

			</div>
			
		</div>


		<script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>
<script>
	
	$('#submit').click(function () {




		if($('#crowd_file').val()===""){
			alert("添加失败  相册图片不能为空 ")
			return false;
		}

	    var crowd_name = $.trim($('#upload_crowd_name').val());
	    var crowd_desc = $.trim($('#upload_crowd_desc').val());

		if($('#crowd_file').val()===""||crowd_name==""){
			alert("添加失败 检测名称 和图片是否为空")
			return false;
		}

		$("#container").addClass("addClass1");
		$(".div1").hide()

	    var crowd_file = $('#crowd_file')[0].files[0];

	    var filename=crowd_file.name

	
	    var formData = new FormData();
	    formData.append("file",$('#crowd_file')[0].files[0]);
	    formData.append("title", crowd_name);
	    formData.append("imageDescribe", crowd_desc);
	
	    $.ajax({
	        url:'/album',
	        dataType:'json',
	        type:'POST',
	        data: formData,
	        processData : false, // 使数据不做处理
	        contentType : false, // 不要设置Content-Type请求头
	        success: function(data){
	            console.log(data);
	            if (data.flag == true) {
	                alert('上传成功！');
					
					location.href="image.html";
	            }else{

					$("#container").removeClass("addClass1");
					$(".div1").show()

	            	alert("上传失败:已有此名称的相册了")
				}
	
	        },
	        error:function(response){
	            console.log(response);
	        }
	    });
		return false ;
	})


	$("body").on("change", "#crowd_file", function () {
		console.clear()

		var file = document.getElementById("crowd_file").files;
		var pd = false;
		for (i = 0; i < file.length; i++) {
			if (file[i] != undefined) {
				console.log(file[i].name)
				var pa = file[i].name
				var last = pa.lastIndexOf('\\') + 1;
				var File_name = pa.substring(last, pa.length);  //文件名称
				//获取文件后缀
				var aszd = File_name.lastIndexOf('.') + 1;
				var suffix = File_name.substring(aszd, aszd.length);  //文件后缀
				console.log(suffix)
				//修改图片后缀
				if (pd_file1(suffix)) {
					pd = true;
					break;

				}
			}
		}

		if(pd){
			$("#crowd_file").val("");
		}
		return false;

	})

	function pd_file1(suffix) {

		if(suffix==="png"||suffix==="jpg"||suffix==="jpeg"||suffix==="gif"){

			return false;
		}else{
			alert("不支持你上传的文件 目前只支持(  gif   jpg    jpeg   png)")
			return true;
		}
	}
</script>
		
	</body>
</html>
